<template>
  <div>
    <el-autocomplete
         class="inputInfo"
          v-model="searchcursom"
          :fetch-suggestions="querySearch"
           :trigger-on-focus="false"
          placeholder="请输入内容"
          @select="handleSelect"
        >
        <template slot-scope="{ item }">
                  <div class="name">姓名:{{ item.value }},工号:{{ item.address }}</div>
                </template>
        </el-autocomplete>,
        
  </div>
</template>

<script>
import {
  unabsorbedList,
} from "@/api/counselor/index";
export default {
  data() {
    return {
      menus: [],
      subMenuList: [],
      openKeys: [],
      selectedKeys:[],     
      markDownTxt: '',
      searchcursom: '',      
      helpList:[],
    }
  },
  methods:{
    querySearch(queryString, cb) {
  
     if(queryString=='') return   //如果输入框无内容，不调接口
     unabsorbedList({ name: queryString }).then((res) => {
      console.log(res,'ddd')
        if (res && res.code == 200) {
      //传关键字后返回的结果就是筛选后的
         this.helpList = res.rows.map(item => {
        return {
          value: item["name"],
          address: item["tno"]
        };
      });
         var helpList = this.helpList;
          var results = queryString ? helpList.filter(this.createFilter(queryString)) : helpList;    
          // 调用 callback 返回建议列表的数据
          cb(results);
        }
      })
     
      },
       createFilter(queryString) {
        return (item) => {      
        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };//fVcHelpCenterName是接口返回的名称和输入的名称做对比
      },
      //下拉点击之后，把id传给menu的selectedKeys 数组，实现定位高亮效果，调用菜单的点击事件，实现显示对应内容
       handleSelect(item) {  
        console.log("item", item);     
        let arr = []
        arr.push(item.name)
        this.selectedKeys = arr
        // this.onMenuSelected(item)
      },
  }
  
};
</script>

<style>
</style>